<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h3>父组件：{{des}}</h3>
			<!-- 接收子组件通过$emit发射的事件，传递参数触发父组件changs方法-->
			<my-son @biuapp="changs"></my-son>
		</div>
		<template id="son">
			<div style="border: 2px greenyellow solid;">
				<h2>这是子组件son</h2>
				<button type="button" @click="fn">发射</button>
			</div>
		</template>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
		  var  MySon={
			  template:'#son',
			  data(){//子组件的data
				  return{
					  // 子组件定义的msg
					  msg:'我是子组件中的数据'
				  }
			  },
			  methods:{
				  fn(){//把子组件的数据给父组件
					  // 发射一个事件并写的参数
					  // 第一个参数：事件名，第二个参数：携带的参数
					  this.$emit("biuapp",this.msg)
					  console.log('已经发射')
				  }
			  }
		  }		  
		  new Vue({
			  el:'#app',
			  data:{
				  // 父组件的des
				  des:''
			  },
			  methods:{
				  changs(value){
					  this.des=value
					  console.log(value)
					  console.log('接收到了')
				  }
			  },
			  components:{
				MySon  
			  }
		  })
		</script>
	</body>
</html>